import React, { Component } from "react";
import { Row, Col } from "antd";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import { createSelect } from "../factory";
import { isFunction } from "../../../utils/is-object";

const dateFormatOptions = [
  { label: "年", value: "YYYY" },
  { label: "月", value: "MM" },
  { label: "日", value: "DD" },
];
const timeFormatOptions = [
  { label: "时", value: "HH" },
  { label: "分", value: "mm" },
  { label: "秒", value: "ss" },
];
class DatePickerProperties extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    node: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onUpdate: PropTypes.func.isRequired,
  };

  state = {
    selectedDateFormat: [],
    selectedTimeFormat: [],
  };

  handleFormatChange = (value, property) => {
    const { onUpdate } = this.props;
    switch (property) {
      case "dateFormat":
        this.setState({
          selectedDateFormat: value,
        });
        break;
      case "timeFormat":
        this.setState({
          selectedTimeFormat: value,
        });
        break;
      default:
        break;
    }
    if (isFunction(onUpdate)) {
      onUpdate(value, property);
    }
  };

  render() {
    const { data } = this.props;
    const { selectedDateFormat, selectedTimeFormat } = this.state;
    const getOptions = (property, options) => ({
      size: "small",
      onChange: this.handleFormatChange,
      data,
      property,
      getter: (data, property) => data.get(property),
      options,
      mode: "multiple",
    });
    
    const getSelectOptions = (property, options) => {
      const { onUpdate } = this.props;
      const onChange = (value) => {
        onUpdate(value, "size");
      };
      return {
        size: "small",
        onChange,
        onUpdate,
        data: this.props.data.toJS(),
        property,
        getter: (data, property) => data[property],
        options,
      };
    };
    return (
      <>
        <Row className="row">
          <div className="label">
            <FormattedMessage {...messages.propertyDateformat} />
          </div>
          {createSelect(
            getOptions(
              "dateFormat",
              dateFormatOptions.filter(
                item => !selectedDateFormat.includes(item)
              )
            )
          )}
        </Row>
        <Row className="row">
          <div className="label">
            <FormattedMessage {...messages.propertyTimeformat} />
          </div>
          {createSelect(
            getOptions(
              "timeFormat",
              timeFormatOptions.filter(
                item => !selectedTimeFormat.includes(item)
              )
            )
          )}
        </Row>

        <Row className="row">
          <Col span={10}>
            大小
          </Col>
          <Col span={14}>
            {createSelect(
              getSelectOptions("size", [
                {
                  label: "small",
                  value: "small",
                },
                {
                  label: "large",
                  value: "large",
                },
                {
                  label: "medium",
                  value: "",
                },
              ])
            )}
          </Col>
        </Row>
      </>
    );
  }
}

export default DatePickerProperties;
